<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="cate_name" label="类型" width="130"></el-table-column>
      <el-table-column prop="cate_action" label="收藏物件标题" :formatter="actionFormat"></el-table-column>
      <el-table-column prop="user_info.nickname" label="用户昵称" width="150"></el-table-column>
      <el-table-column prop="create_time" label="注册日期" width="150"></el-table-column>
      <el-table-column prop="status_text" label="状态" width="120"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page="textData.current_page"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {}
    },
    computed: {
      ...mapState({
        tableData: state => state.favorite.favoriteList,
        textData: state => state.favorite.pageData
      })
    },
    created () {
      this.favoriteList()
    },
    methods: {
      async favoriteList () {
        let payload = {
          user_id: this.$route.params.id,
          page: this.textData.current_page,
          listRows: this.textData.per_page
        }
        await this.$store.dispatch('favorite/favoriteList', payload)
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.favoriteList()
      },
      actionFormat (value) {
        if (value.cate_action === 'goods') {
          return value.snapshoot.title
        } else {
          return value.snapshoot.name
        }
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
